<template>
  <div>
    <Header />
    <Marquee />

    <div class="shop_bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shop' }"
          >商家页面</el-breadcrumb-item
        >
        <el-breadcrumb-item style="font-size: 12px; margin-top: 2px">{{
          placeidShop[0].s_content
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="shop-details-show">
      <div class="shop-details-box">
        <!-- <div class="shop-details-img" :style="{ 'background-image': `url(${placeidShop[0].s_Images[0]})` }"></div> -->
        <div class="block shop-details-img">
          <el-carousel height="400px">
            <el-carousel-item v-for="item in placeidShop[0].s_Images" :key="item">
              <img class="small" :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="project-list-item-detail">
          <div class="project-list-item-title" style="font-size: 25px">
            {{ placeidShop[0].s_content }}
          </div>
          <br />
          <div class="project-list-item-time">
            时间 : &nbsp;&nbsp; 2023.03.10 - 03.10
          </div>
          <br />
          <div class="project-list-item-address">
            地点 : &nbsp;&nbsp;
            <span class="venue-name-and-address"> 千锋2209大堂 - 场地编号 : {{placeidShop[0].placeid}}</span>
            <span
              class="venue-name-and-address"
              style="margin-left: 25px; color: gray"
              >广州市白云区学山创意产业园</span
            >
          </div>

          <div class="project-list-item-footer">
            <div project-list-button>
              <div project-list-item-num-box>
                场次: &nbsp;&nbsp;<span
                  :class="{
                    'project-list-item-num': true,
                    'project-list-item-boder': address,
                  }"
                  @click="changeTimeOne"
                  >3月10</span
                >
                <!-- <span style="margin-left: 20px;" :class="{'project-list-item-num':true,'project-list-item-boder':num===1}" @click="changeTimeTwo">3月10 下午场</span> -->
              </div>
              <div class="project-list-item-money-box">
                单价: &nbsp;&nbsp;<span
                  :class="{
                    'project-list-item-money': true,
                    'project-list-item-boder': money,
                  }"
                  @click="changeTimeMoney"
                  >¥<span ref="moneyInfo">{{
                    placeidShop[0].s_price
                  }}</span></span
                >
              </div>
              <div class="project-list-item-money-number">
                数量: &nbsp;&nbsp;<span class="span_number-box">
                  <el-button
                    class="span_number-remove"
                    @click="removeNumber"
                    :class="number <= 1 ? 'disabled' : ''"
                    plain
                  >
                    +
                  </el-button>
                  <span ref="numberInfo">{{ number }}</span>
                  <el-button
                    class="span_number-add"
                    @click="addNumber"
                    :class="number >= 10 ? 'disabled' : ''"
                    plain
                  >
                    +
                  </el-button> </span
                ><span
                  style="
                    font-size: 20px;
                    color: pink;
                    margin-left: 50px;
                    text-align: left;
                    padding-left: 20px;
                  "
                  class="span_number-box"
                  >总价:￥{{ pic }}</span
                >
              </div>
              <div class="project-list-item-money-server">
                <span>*资质票快递配送</span> <span>*不支持7天无理由退票</span
                ><br />
              </div>
              <button class="project-list-item-button" @click="buyTickets">
                立即购票
              </button>
            </div>
          </div>

          <div class="project-list-nav">
            <div class="project-list-nav-img">
              <h2
                style="
                  margin-bottom: 25px;
                  margin-top: 20px;
                  background-color: white;
                "
              >
                活动详情
              </h2>
              <div class="project-list-nav-img-box"></div>
            </div>
            <div class="project-list-nav-known">
              <h2>主办方信息</h2>
              <p
                style="
                  margin: 5px;
                  font-size: 20px;
                  color: darksalmon;
                  text-align: center;
                "
              >
                广州千锋superX
              </p>
              <h2>购票须知</h2>
              <p>
                1、会员购仅作为演出/赛事项目的票务代理方,不承担除法律明确规定外的责任。若您与主办方之间出现争议,会员购将尽力为您协调处理保障您的利益,但无法保证协调结果符合您的期望,会员购无权对争议作出处理。<br />

                2、会员购在线售票为电子票或纸质票。如您购买的是电子票,入场时请在bilibili
                APP中的【订单中心】打开电子票检票入场(部分活动需兑换实体票入场);电子票不得转售,请在正规途径购买；电子票截图无法入场。如您购买的是纸质票,需在购票时填写准确配送信息,纸质票将在活动开始之前寄出,邮费由用户承担；因纸质票的特殊性,遗失不补且无法挂失,请您保管好购买到的票品。<br />

                3、部分活动不提供现场售票服务,请您提前购买。<br />

                4、因票品具有稀缺性和时效性的特点,一旦退货将会影响二次销售,票品均不支持七天无理由退票,请您理解并审慎购买,并非所有项目主办方都支持因个人原因发起的退票,具体请以各商品展示页说明信息为准,请您在购买前仔细阅读商品信息。<br />

                5、若所购项目主办方支持因个人原因退票,您在因个人原因退票时需支付一定比例的手续费,具体比例您可在《bilibili购票服务协议》中查询。<br />

                6、为保障您的人身安全,主办方在人流高峰可能会采取临时现场限流措施,如对您的正常观展产生影响,敬请谅解。<br />

                7、若有其他问题请联系客服:客服入口在移动端APP “我的”
                个人中心,点击“我的客服”,选择“在线客服”,即可咨询。<br />

                8、《会员购服务协议》
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <GoTop />
    <Footer style="margin-top: 915px"></Footer>
  </div>
</template>

<script>
import Header from "../../components/Header/index.vue";
import Footer from "../../components/Footer/index.vue";
import Marquee from "../../components/Marquee/index.vue";
import qs from "qs";

import GoTop from "../../components/GoTop/index.vue";
export default {
  // 注册组件
  components: {
    Header,
    Footer,
    Marquee,
    GoTop,
  },
  data() {
    return {
      num: "",
      money: false,
      number: 1,
      address: true,
      // 场地编号
      placeid: "",
    };
  },
  created() {
    this.placeid = this.$route.params.id;
  },
  computed: {
    // 对应该场地的信息
    placeidShop() {
      return this.$store.getters.excellentShop.filter((item) => {
        return item.placeid === this.placeid;
      });
    },
    pic() {
      //总价
      return (this.placeidShop[0].s_price * this.number).toFixed(2);
    },
  },
  methods: {
    //选中颜色
    changeTimeOne() {
      if (this.address === false) {
        this.address = true;
        return;
      }
      this.address = false;
    },
    changeTimeMoney() {
      if (this.money === false) {
        this.money = true;
        return;
      }
      this.money = false;
    },
    //判断登录态 是否商家
    async buyTickets() {
      if (this.$store.state.userLogin == false) {
        this.$message({
          message: "还不登陆?不登录怎么买票",
          type: "warning",
        });
        this.$router.push("/login");
        return;
      }
      if (this.$store.state.user.categary === "商家") {
        this.$message({
          message: "商家?看可以但是千万动手",
          type: "warning",
        });
        return;
      }
      //携带的四个参数
      let obj = {
        username: this.$store.state.user.username, //用户名
        s_name: this.placeidShop[0].s_name, //商家名
        s_price: this.placeidShop[0].s_price, //总价
        s_num: this.number, //购买数量
      };
      let res = await this.$http({
        method: "POST",
        url: "http://10.3.136.136:8888/tobuy",
        data: qs.stringify(obj),
        headers: { "content-type": "application/x-www-form-urlencoded" },
      });
      if (res.status.code === 200) {
        this.$message({
          title: "温馨提示",
          message: res.message,
          type: "success",
        });
        this.$store.commit("GEtALLUSERDIN", obj);
      } else {
        this.$message({
          title: "温馨提示",
          message: res.message,
          type: "warning",
        });
      }
    },
    removeNumber() {
      if (this.number <= 1) {
        this.$message({
          title: "温馨提示",
          message: "我的好哥哥您最少购买一张",
          type: "warning",
        });
        return;
      }
      return this.number--;
    },
    addNumber() {
      if (this.number >= 10) {
        this.$message({
          title: "温馨提示",
          message: "我的好哥哥您最多购买十张",
          type: "warning",
        });
        return;
      }
      this.number++;
    },
  },
};
</script>

<style lang="scss" scoped>
$size: 1100px;
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.project-list-nav {
  size: $size;
  height: 900px;
  margin-top: 400px;
  padding-left: 30px;
  background-color: rgb(244, 245, 247);
  overflow: hidden;

  .project-list-nav-img {
    width: 730px;
    height: 100%;
    // background-color: chocolate;
    float: left;
  }

  .project-list-nav-img-box {
    width: 100%;
    height: 722px;
    background-color: crimson;
    background: url(../../assets/page.png) no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
  }

  .project-list-nav-known {
    padding-top: 20px;
    width: 300px;
    height: 100%;
    float: right;
  }
}

.shop_bread {
  width: $size;
  margin: 0 auto;
  border-bottom: 1px solid;
  border-top: 1px solid;
  height: 30px;
  margin-top: 10px;
  padding-top: 15px;
}

.shop-details-show {
  width: 100%;
  height: 520px;
  margin-top: 30px;

  .shop-details-box {
    width: $size;
    height: 520px;
    margin: 0 auto;
    border-bottom: 1px dashed;
  }

  .shop-details-img {
    width: 300px;
    height: 400px;
    background-size: 100% 100%;
    border-radius: 15px;
    float: left;
    margin-right: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .project-list-item-detail {
    padding-top: 20px;
  }

  .project-list-item-footer {
    width: 600px;
    height: 300px;
    float: left;
    margin-top: 20px;
  }

  .project-list-item-money,
  .project-list-item-num,
  .span_number-box {
    display: inline-block;
    border: 1px gray solid;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 19px;
    border-radius: 10px;
  }

  .project-list-item-money,
  .project-list-item-num,
  .span_number-box:hover {
    cursor: pointer;
  }

  .project-list-item-money-box {
    margin-top: 20px;
  }

  .project-list-item-button {
    width: 270px;
    height: 50px;
    background-color: rgb(241, 140, 140);
    border-radius: 10px;
    margin-top: 20px;
    cursor: pointer;
  }

  .project-list-item-money-server {
    color: gray;
    margin-top: 20px;
  }

  .project-list-item-money-number {
    margin-top: 20px;
  }

  .span_number-remove,
  .span_number-add {
    display: inline-block;
    height: 100%;
    font-size: 40px;
    line-height: 30px;
    border: 0px;
  }

  .span_number-remove {
    float: left;
    margin-left: 20px;
  }

  .span_number-add {
    float: right;
    margin-right: 20px;
  }

  .span_number-box {
    width: 200px;
  }
}

.project-list-item-boder {
  color: rgb(234, 168, 179);
  border: 1px solid rgb(243, 181, 191) !important;
}

.disabled {
  cursor: not-allowed;
  color: #ccc;
}
</style>